<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的属性绑定和双向数据绑定</title>
    <script src="../../assets/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>属性绑定</h1>
    <!--插值，表达式-->
    <p>Message: {{ msg + ' - ' + content }}</p>
    <p>{{ isOk ? '123' : '456' }}</p>
    <!--属性绑定-->
    <p v-bind:title="title">Hello {{content}}</p>
    <!-- 绑定class -->
    <p :class="MenuClass">example-class</p>
    <p class="static" :class="{active: isActive, 'text-danger': hasError }">example-class</p>
    <p :style="{fontSize: size + 'px', backgroundColor: bgColor}">
        vue style
    </p>
</div>
<script>
    // 根实例
    new Vue({
        el: '#root',
        data: {
            msg: 'hello',
            title: 'this is title',
            content: 'world',
            isOk: true,
            MenuClass: 'example-class',
            isActive: true,
            hasError: false,
            size: 20,
            bgColor: 'red',
            inputValue: '',
            checkedNames: [],
            picked: '',
            selected: ''
        }
    })
</script>
</body>
</html>